<template>
  <div>
    <Header />

    <div class="new_song fL w100 all_song">
        <div class="classification fL w100">
    <div class="layout">
      <ul class="g_lei fL w100">
        <li>
          <h4>风格</h4>
          <div class="edit_lab" >
            <a href="###"><button @click="getJieLun">流行</button></a>
            <a href="###"><button>摇滚</button></a>
            <a href="###"><button>民谣</button></a>
            <a href="###"><button>电子</button></a>
            <a href="###"><button>舞曲</button></a>
            <a href="###"><button>说唱</button></a>
            <a href="###"><button>轻音乐</button></a>
            <a href="###"><button>爵士</button></a>
            <a href="###">
              <button class="morela morela_a">更多</button>
              <div id="mb"></div>
              <div class="showbox_a">
                <img src="images/san.png" />
                <div class="nbtn_mag">
                  <button>R&B/Soul</button>
                  <button>古典</button>
                  <button>民族</button>
                  <button>英伦</button>
                  <button>金属</button>
                  <button>朋克</button>
                  <button>蓝调</button>
                  <button>雷鬼</button>
                  <button>世界音乐</button>
                  <button>拉丁</button>
                  <button>另类/独立</button>
                  <button>New Age</button>
                  <button>古风</button>
                  <button>Bossa Nova</button>
                </div>
              </div>
            </a>
          </div>
        </li>
        <li>
          <h4>语种</h4>
          <div class="edit_lab">
            <a href="###"><button>华语</button></a>
            <a href="###"><button>欧美</button></a>
            <a href="###"><button>日语</button></a>
            <a href="###"><button>韩语</button></a>
            <a href="###"><button>粤语</button></a>
            <a href="###"><button>小语种</button></a>
            <a href="###">
              <button class="morela morela_a">更多</button>
              <div id="mb"></div>
              <div class="showbox_a">
                <img src="images/san.png" />
                <div class="nbtn_mag">
                  <button>R&B/Soul</button>
                  <button>古典</button>
                  <button>民族</button>
                  <button>英伦</button>
                  <button>金属</button>
                  <button>朋克</button>
                  <button>蓝调</button>
                  <button>雷鬼</button>
                  <button>世界音乐</button>
                  <button>拉丁</button>
                  <button>另类/独立</button>
                  <button>New Age</button>
                  <button>古风</button>
                  <button>Bossa Nova</button>
                </div>
              </div>
            </a>
          </div>
        </li>
        <li>
          <h4>场景</h4>
          <div class="edit_lab">
            <a href="###"><button>清晨</button></a>
            <a href="###"><button>夜晚</button></a>
            <a href="###"><button>学习</button></a>
            <a href="###"><button>工作</button></a>
            <a href="###"><button>午休</button></a>
            <a href="###"><button>下午茶</button></a>
            <a href="###"><button>地铁</button></a>
            <a href="###"><button>驾车</button></a>
            <a href="###"><button>酒吧</button></a>
          </div>
        </li>
        <li>
          <h4>情感</h4>
          <div class="edit_lab">
            <a href="###"><button>怀旧</button></a>
            <a href="###"><button>清新</button></a>
            <a href="###"><button>浪漫</button></a>
            <a href="###"><button>性感</button></a>
            <a href="###"><button>伤感</button></a>
            <a href="###"><button>治愈</button></a>
            <a href="###"><button>放松</button></a>
            <a href="###"><button>孤独</button></a>
            <a href="###"><button>兴奋</button></a>
          </div>
        </li>
        <li class="bordnone">
          <h4>主题</h4>
          <div class="edit_lab">
            <a href="###"><button>影视</button></a>
            <a href="###"><button>ACG</button></a>
            <a href="###"><button>儿童</button></a>
            <a href="###"><button>校园</button></a>
            <a href="###"><button>游戏</button></a>
            <a href="###"><button>吉他</button></a>
            <a href="###"><button>70后</button></a>
            <a href="###"><button>80后</button></a>
            <a href="###">
              <button class="morela morela_b">更多</button>
              <div id="mb"></div>
              <div class="showbox_b">
                <img src="images/san.png" />
                <div class="nbtn_mag">
                  <button>R&B/Soul</button>
                  <button>古典</button>
                  <button>民族</button>
                  <button>英伦</button>
                  <button>金属</button>
                  <button>朋克</button>
                  <button>蓝调</button>
                  <button>雷鬼</button>
                  <button>世界音乐</button>
                  <button>拉丁</button>
                  <button>另类/独立</button>
                  <button>New Age</button>
                  <button>古风</button>
                  <button>Bossa Nova</button>
                </div>
              </div>
            </a>
          </div>
        </li>
      </ul>
    </div>
  </div>
      <div class="layout">
        <div class="top_alsog">
          <h2 class="fL">热门推荐</h2>
          
          <div class="fR">
            <button class="hottest active">最热</button>
            <button class="newest">最新</button>
          </div>
        </div>
        <!-- 放在占位符.TXT中了 -->
        <ul class="newsong ">
            <li v-for="nicesong in songs"  :key="nicesong.al.id">
            <!-- 没有播放 -->
              <a href="#">  <img :src="nicesong.al.picUrl" /></a>
                <a>
                <p>{{nicesong.al.name}}</p>
                <!-- <font>{{nicesong.ar.name}}</font> -->
              </a>
            </li>
          </ul>

        <div class="page_cent">
          <button>
            < </button>
            <button class="active">1</button>
            <button>2</button>
            <button>3</button>
            <button>...</button>
            <button>142</button>
            <button>></button>
          </button>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '../components/Header.vue'

import Footer from '../components/Footer.vue'
export default {
  name: 'Song',
  data() {
    return {
      songs: [],
    }
  },

  components: {
    Header,
    Footer,
  },

  computed: {},

  methods: {
      getJieLun() {
       this.$axios.get(`http://localhost:3000/artist/top/song?id=6452`).then(
        res => {
          //标签
            console.log('请求成功了',res.data.songs);

          this.$bus.$emit('getJieLun', res.data.songs)
        })
    },
  },
    mounted() {
    this.$bus.$on('getJieLun', songs => {
      console.log('我是Song组件 收到了数据:', songs)
      this.songs = songs
    })
  },
}
</script>

<style scoped>

</style>